<template>
	<view class="register" :style="{height:(screenW/9)*16+'px'}">
		<navbar mode="normal" title="注册"></navbar>
		<view class="body" :style="{width:screenW+'px'}">
			<view class="register-inputs">
				<my-input class="input"
				text="请输入用户名" borderColor="#d9d9d9" :widthPercent="75" mode="text" :height="40" checkColor="#2fb6ff" @input="inputName">
				</my-input>
				<my-input class="input"
				text="请输入手机号码" borderColor="#d9d9d9" :widthPercent="75" mode="number" :height="40" checkColor="#2fb6ff" @input="inputPhone">
				</my-input>
				<my-input class="input"
				text="请输入密码" borderColor="#d9d9d9" :widthPercent="75" mode="text" :password="true" :height="40" checkColor="#2fb6ff" @input="inputPassword">
				</my-input>
				<my-input class="input"
				text="请再次输入密码" borderColor="#d9d9d9" :widthPercent="75" mode="text" :password="true" :height="40" checkColor="#2fb6ff" @input="inputRePassword">
				</my-input>
			</view>
			<button class="push-bottom" @click="register">注册</button>
			<view class="text">
				<text style="color: #ccc;">注册即视为同意</text>
				<text style="color: #2fb6ff;" @click="registerClause">《服务条款》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenH:0,
				screenW:0,
				name:"",
				phone:"",
				password:"",
				rePassword:"",
				verify:function(){
					if(this.name === ""){
						return {
							msg:"用户名不能为空",
							suc:false
						}
					}else if(this.phone === ""){
						return {
							msg:"手机号不能为空",
							suc:false
						}
					}else if(this.phone.length != 11){
						return {
							msg:"请输入11位手机号",
							suc:false
						}
					}else if(this.password === ""){
						return {
							msg:"密码不能为空",
							suc:false
						}
					}else if(this.rePassword === ""){
						return {
							msg:"请再次输入密码",
							suc:false
						}
					}else if(this.rePassword !== this.password){
						return {
							msg:"重复密码输入错误",
							suc:false
						}
					}else{
						return {
							suc:true,
							data:{
								name:this.name,
								phone:this.phone,
								password:this.password,
							}
						}
					}
				}
			}
		},
		async created() {
			await this.$getSystemInfo().then(res=>{
				this.screenH = res.screenHeight
				this.screenW = res.screenWidth
			})
		},
		methods: {
			async register(){
				//调用verify函数进行输入验证
				const verify = this.verify()
				if(verify.suc){
					uni.showLoading({
					})
					await this.$postRequst("user/register",verify.data).then(res=>{
						uni.hideLoading()
						if(res.data.code===200){
							uni.showToast({
								title:"注册成功！"
							})
							setTimeout(function(){
								uni.hideToast()
								uni.navigateBack({
									
								})
							},1500)
						}else{
							uni.showToast({
								title:"注册失败！请检查网络",
								icon:"none"
							})
							uni.hideToast()
						}
					})
				}else{
					uni.showToast({
						title:verify.msg,
						icon:"none"
					})
				}
			},
			registerClause(){
				console.log("点击服务条款");
			},
			inputName(v){
				this.name = v
			},
			inputPhone(v){
				this.phone = v
			},
			inputPassword(v){
				this.password = v
			},
			inputRePassword(v){
				this.rePassword = v
			}
		}
	}
</script>

<style lang="scss">
	.register{
		.body{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.register-inputs{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 20px;
				width: 100%;
				.input{
					margin-top: 10px;
				}
			}
			.push-bottom{
				width: 50%;
				margin-top: 20px;
				background-color: $my-main-color;
				color: #fff;
			}
			.text{
				display: flex;
				flex-direction: row;
				margin-top: 5px;
				text{
					font-size: 14px;
				}
			}
		}
	}
</style>
